<template>
  <basic-drawer
    class="basic-drawer edit-cascade-node-drawer"
    title="节点编辑"
    :visible="visible"
    width="448px"
    :close-on-click-modal="false"
    ok-text="保存"
    :loading="loading"
    @open="handleDrawerOpen"
    @close="handleClose"
    @cancel="emit('update:visible', false)"
    @ok="handleSave">
    <a-scrollbar ref="scrollbarRef">
      <a-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        class="drawer-form"
        layout="vertical">
        <a-form-item
          label="节点名称"
          field="name"
          required
          hide-asterisk
          asterisk-position="end">
          <a-input
            v-model="formData.name"
            placeholder="请输入节点名称"
            :max-length="32"
            show-word-limit></a-input>
        </a-form-item>
        <a-form-item
          label="区域"
          field="region_id"
          required
          hide-asterisk
          asterisk-position="end">
          <a-select
            v-model="formData.region_id"
            placeholder="请选择区域"
            class="w-full">
            <a-option
              v-for="region in regionList"
              :key="region.id"
              :label="region.name"
              :value="region.id!"></a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          field="cascade_level"
          required
          hide-asterisk
          asterisk-position="end">
          <template #label>
            <a-tooltip position="top">
              节点层级
              <template #content>
                <div>
                  1. L2 节点负责回源，L1 节点自动从 L2 节点获取源站数据。
                </div>
                <div>2. 如果没有 L2 节点，L1 节点直接向源站请求回源。</div>
              </template>
            </a-tooltip>
          </template>
          <a-radio-group v-model="formData.cascade_level">
            <a-radio :value="1">L1</a-radio>
            <a-radio :value="2">L2</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          v-if="formData.cascade_level === 2"
          label="级联IP"
          field="cascade_ip"
          hide-asterisk
          asterisk-position="end">
          <template #label>
            级联IP
            <a-tooltip
              content="L1节点回源当前L2节点时将会使用该IP地址。"
              position="top">
              <i-icons-question
                class="cursor-pointer translate-y-2px question-icon" />
            </a-tooltip>
          </template>
          <a-select
            v-model="formData.cascade_ip"
            placeholder="请选择级联IP"
            class="w-full">
            <a-option label="使用主IP" value=""></a-option>
            <a-option
              v-for="(ip, i) in formData.ips"
              :key="i"
              :label="ip"
              :value="ip"></a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="formData.cascade_level === 2"
          label="级联端口"
          field="cascade_port"
          hide-asterisk
          asterisk-position="end"
          class="!mb-6"
          required>
          <template #label>
            级联端口
            <a-tooltip position="top" :content-style="{ 'max-width': '380px' }">
              <template #content>
                <div>L1 节点回源当前 L2 节点时将会使用该端口,不能为8888</div>
              </template>
              <i-icons-question
                class="cursor-pointer translate-y-2px question-icon" />
            </a-tooltip>
          </template>
          <a-input-number
            v-model="formData.cascade_port"
            hide-button
            :max="65535"
            :precision="0"
            placeholder="请输入级联端口"></a-input-number>
        </a-form-item>
        <a-form-item
          label="文件缓存路径"
          field="cache_path"
          hide-asterisk
          required>
          <template #label>
            <div class="flex gap-x-1 items-center">
              <span>文件缓存路径</span>
              <a-tooltip :content-style="{ 'max-width': '509px' }">
                <i-icons-question class="question-icon" />
                <template #content>
                  <div v-for="(item, index) in cacheRulePathText" :key="index">
                    {{ index + 1 }}.{{ item }}
                  </div>
                </template>
              </a-tooltip>
            </div>
          </template>
          <div class="w-full">
            <div class="text-xs text-5 mb-2">请确保目录已存在</div>
            <a-input
              v-model="formData.cache_path"
              placeholder="请输入文件缓存路径"
              :max-length="2048"
              @input="
                (val) => (formData.cache_path = val.replace(/\s/g, ''))
              "></a-input>
          </div>
        </a-form-item>
        <a-form-item
          label="磁盘空间"
          field="cache_size"
          hide-asterisk
          asterisk-position="end"
          required>
          <section class="append-select">
            <a-input-number
              v-model="formData.cache_size"
              :max-length="13"
              class="!w-100">
              <template #append>
                <a-select v-model="diskFileSizeUnit" :options="diskOptions">
                </a-select>
              </template>
            </a-input-number>
          </section>
        </a-form-item>
      </a-form>
    </a-scrollbar>
  </basic-drawer>
</template>

<script setup lang="ts">
import { getApiNodeApi, updateApiNodeApi } from '@/apis/modules/node'
import { getApiResolveRegionsListApi } from '@/apis/modules/resolve/area'
import type { FieldRule } from '@arco-design/web-vue'
import { cloneDeep, omit } from 'lodash-es'

interface IEmit {
  (event: 'update:visible', value: boolean): void
  (event: 'update:record', value: string): void
  (event: 'save'): void
}

interface IProps {
  visible: boolean
  record?: string
}

const emit = defineEmits<IEmit>()
const props = defineProps<IProps>()

const scrollbarRef = ref()

// 节点数据
const {
  data: nodeInfo,
  loading,
  request: getNodeInfo
} = useRequest(getApiNodeApi)
const {
  formRef,
  formData,
  formRules: templateRules,
  diskFileSizeUnit
} = useNodeTemplateConfig({
  name: '',
  region_id: '',
  cascade_level: 1,
  cascade_port: 8080,
  cascade_ip: ''
})
const formRules = computed<Record<string, FieldRule[]>>(() => {
  return {
    name: [
      { required: true, message: '请输入节点名称' },
      { min: 4, max: 32, message: '输入长度4-32个字符' }
    ],
    region_id: [{ required: true, message: '请选择节点区域' }],
    // cascade_ip: [
    //   {
    //     validator(value, callback) {
    //       if (!value) {
    //         return callback('请选择级联IP')
    //       }
    //       callback()
    //     }
    //   }
    // ],
    cascade_port: [
      { required: true, message: '请输入级联端口' },
      {
        validator(value, callback) {
          if (Number(value) < 1024 || Number(value) > 65535) {
            return callback('取值范围1024-65535')
          }
          if ([8000, 9000].includes(Number(value))) {
            return callback('端口不能为8000，9000')
          }
          callback()
        }
      }
    ],
    ...templateRules.value
  }
})
function handleDrawerOpen() {
  nextTick(() => {
    scrollbarRef?.value?.scrollTo({ top: 0 })
  })
}

// 区域列表数据
const { data: regionList, run: getRegions } = useListRequest(
  getApiResolveRegionsListApi,
  {
    params: { offset: 0, limit: -1 }
  }
)

// 节点信息回显
watch(
  () => props.record,
  async () => {
    if (!props.record) {
      return
    }
    await getNodeInfo({ id: props.record })
    await getRegions()
    coverObjectValue(formData, nodeInfo.value!)

    const { value, unit } = separateNumberAndLetter(nodeInfo.value!.cache_size!)
    formData.cache_size = Number(value)
    const index = diskOptions.find((item) => item.label === unit)
      ?.value as number
    diskFileSizeUnit.value = index ?? 2
    formData.region_id = nodeInfo.value!.region_info!.id!
    formData.cascade_ip = nodeInfo.value!.cascade_ip!
      ? nodeInfo.value!.cascade_ip!
      : ''
  }
)

// 保存节点信息
const { request: saveRequest } = useRequest(updateApiNodeApi)
async function handleSave() {
  const error = await formRef.value?.validate()
  if (error) return false
  const data = cloneDeep(formData)
  const symbol = diskOptions.find(
    (item) => item.value === diskFileSizeUnit.value
  )?.label

  await saveRequest({
    ...(omit(data, ['ips', 'ip']) as any),
    id: props.record,
    //为空为主ip
    cascade_ip: data.cascade_ip,
    cache_size: `${data.cache_size}${symbol}`
  })
  emit('update:visible', false)
  emit('save')
  ToastUtils.success('保存成功')
}
function handleClose() {
  emit('update:visible', false)
  formRef?.value?.resetFields()
}
</script>

<style scoped lang="less"></style>
